<!DOCTYPE html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">










<meta name="description" content="基本概念&amp;lt;noscript&amp;gt;&amp;lt;noscript&amp;gt;标签：当页面不支持script或禁用了script时会显示&amp;lt;noscript&amp;gt;里面的内容。 &amp;lt;script&amp;gt;中的async和defer12345678910111.`&amp;lt;script src=&amp;quot;script.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;`读到就立即执行。2.`&amp;l">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript之进阶总结">
<meta property="og:url" content="http://yoursite.com/2020/12/07/JavaScript之进阶总结/index.html">
<meta property="og:site_name" content="春风自是人间客">
<meta property="og:description" content="基本概念&amp;lt;noscript&amp;gt;&amp;lt;noscript&amp;gt;标签：当页面不支持script或禁用了script时会显示&amp;lt;noscript&amp;gt;里面的内容。 &amp;lt;script&amp;gt;中的async和defer12345678910111.`&amp;lt;script src=&amp;quot;script.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;`读到就立即执行。2.`&amp;l">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gho47acnm9j303q03ndfo.jpg">
<meta property="og:image" content="https://wx4.sinaimg.cn/mw690/0069qZtTgy1gho487f7lnj305904omx1.jpg">
<meta property="og:image" content="https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043719.png">
<meta property="og:image" content="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gho3yuu5lpj30au09n74t.jpg">
<meta property="og:updated_time" content="2020-12-08T13:25:25.757Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JavaScript之进阶总结">
<meta name="twitter:description" content="基本概念&amp;lt;noscript&amp;gt;&amp;lt;noscript&amp;gt;标签：当页面不支持script或禁用了script时会显示&amp;lt;noscript&amp;gt;里面的内容。 &amp;lt;script&amp;gt;中的async和defer12345678910111.`&amp;lt;script src=&amp;quot;script.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;`读到就立即执行。2.`&amp;l">
<meta name="twitter:image" content="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gho47acnm9j303q03ndfo.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: "",
      labels: ""
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2020/12/07/JavaScript之进阶总结/">





  <title>JavaScript之进阶总结 | 春风自是人间客</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">春风自是人间客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description">是非成败转头空，青山依旧在，几度夕阳红。</h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-program">
          <a href="/categories/program" rel="section">
            
            程序
          </a>
        </li>
      
        
        <li class="menu-item menu-item-reading">
          <a href="/categories/reading" rel="section">
            
            阅读
          </a>
        </li>
      
        
        <li class="menu-item menu-item-idea">
          <a href="/categories/idea" rel="section">
            
            想法
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
            关于我
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/12/07/JavaScript之进阶总结/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="彭丹丹">
      <meta itemprop="description" content>
      <meta itemprop="image" content="https://upload.jianshu.io/users/upload_avatars/830956/debe5156eed7?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="春风自是人间客">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">JavaScript之进阶总结</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-12-07T14:19:32+08:00">
                2020-12-07
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/program/" itemprop="url" rel="index">
                    <span itemprop="name">program</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  3,686
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  16
                </span>
              
            </div>
          

          
          
        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h1><h2 id="lt-noscript-gt"><a href="#lt-noscript-gt" class="headerlink" title="&lt;noscript&gt;"></a><code>&lt;noscript&gt;</code></h2><p><code>&lt;noscript&gt;</code>标签：当页面不支持<code>script</code>或禁用了<code>script</code>时会显示<code>&lt;noscript&gt;</code>里面的内容。</p>
<h2 id="lt-script-gt-中的async和defer"><a href="#lt-script-gt-中的async和defer" class="headerlink" title="&lt;script&gt;中的async和defer"></a><code>&lt;script&gt;</code>中的<code>async</code>和<code>defer</code></h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">1.`&lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;`</span><br><span class="line"></span><br><span class="line">读到就立即执行。</span><br><span class="line"></span><br><span class="line">2.`&lt;script async src=&quot;script.js&quot;&gt;&lt;/script&gt;`</span><br><span class="line"></span><br><span class="line">和DOM并行进行（异步）。</span><br><span class="line"></span><br><span class="line">2.`&lt;script defer src=&quot;script.js&quot;&gt;&lt;/script&gt;`</span><br><span class="line"></span><br><span class="line">和DOM并行进行（异步），但在所有`script.js`的执行解析完后，`DOMContentLoaded`事件触发完成之前。</span><br></pre></td></tr></table></figure>
<h2 id="typeof-null为什么返回object"><a href="#typeof-null为什么返回object" class="headerlink" title="typeof null为什么返回object"></a><code>typeof null</code>为什么返回<code>object</code></h2><p><code>null</code>是空对象指针，所以<code>typeof null</code>返回的是<code>object</code>，</p>
<p><code>&#39;null&#39;</code>变为<code>null</code>：<code>JSON.parse(&#39;null&#39;)</code></p>
<h1 id="防篡改对象"><a href="#防篡改对象" class="headerlink" title="防篡改对象"></a>防篡改对象</h1><p><code>preventExtensions</code>：不能增，能删改<br><code>seal</code>：不能增删，能改<br><code>freeze</code>:不能增删改</p>
<table>
<thead>
<tr>
<th style="text-align:center">对象属性</th>
<th style="text-align:center">增</th>
<th style="text-align:center">删</th>
<th style="text-align:center">改</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">preventExtensions</td>
<td style="text-align:center">×</td>
<td style="text-align:center">✓</td>
<td style="text-align:center">✓</td>
</tr>
<tr>
<td style="text-align:center">seal</td>
<td style="text-align:center">×</td>
<td style="text-align:center">×</td>
<td style="text-align:center">✓</td>
</tr>
<tr>
<td style="text-align:center">freeze</td>
<td style="text-align:center">×</td>
<td style="text-align:center">×</td>
<td style="text-align:center">×</td>
</tr>
</tbody>
</table>
<h2 id="不可扩展对象preventExtensions"><a href="#不可扩展对象preventExtensions" class="headerlink" title="不可扩展对象preventExtensions"></a>不可扩展对象preventExtensions</h2><p><strong>Object.preventExtensions</strong>不能增，能删改</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var obj = &#123;a:1,b:2&#125;;</span><br><span class="line">Object.preventExtensions(obj);</span><br><span class="line">obj.c = 3;</span><br><span class="line">console.log(obj.c); // undefined</span><br><span class="line">delete obj.a;</span><br><span class="line">console.log(obj); // &#123;b: 2&#125; 删除成功</span><br><span class="line">obj.b = &apos;hello&apos;</span><br><span class="line">console.log(obj); // &#123;b: &quot;hello&quot;&#125; 修改成功</span><br></pre></td></tr></table></figure>
<p>检测是否不可扩展<strong>Object.isExtensible(obj)</strong></p>
<p>(false是不可扩展，true是正常对象)</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Object.isExtensible(obj);// false</span><br></pre></td></tr></table></figure>
<h2 id="密封的对象seal"><a href="#密封的对象seal" class="headerlink" title="密封的对象seal"></a>密封的对象seal</h2><p><strong>Object.seal</strong>不能增删，能改</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var obj = &#123;a:1,b:2&#125;;</span><br><span class="line">Object.seal(obj);</span><br><span class="line">obj.c = 3;</span><br><span class="line">console.log(obj.c); // undefined</span><br><span class="line">delete obj.a;</span><br><span class="line">console.log(obj); // &#123;a:1,b:2&#125; 删除失败</span><br><span class="line">obj.b = &apos;hello&apos;</span><br><span class="line">console.log(obj); // &#123;a:1,b: &quot;hello&quot;&#125; 修改成功</span><br></pre></td></tr></table></figure>
<p>检测是否密封<strong>Object.isSealed(obj)</strong></p>
<p>(false是正常，true是已经密封了)</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Object.isSealed(obj);// true</span><br></pre></td></tr></table></figure>
<h2 id="冻结的对象freeze"><a href="#冻结的对象freeze" class="headerlink" title="冻结的对象freeze"></a>冻结的对象freeze</h2><p><strong>Object.freeze</strong>不能增删改</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var obj = &#123;a:1,b:2&#125;;</span><br><span class="line">Object.freeze(obj);</span><br><span class="line">obj.c = 3;</span><br><span class="line">console.log(obj.c); // undefined</span><br><span class="line">delete obj.a;</span><br><span class="line">console.log(obj); // &#123;a:1,b:2&#125; 删除失败</span><br><span class="line">obj.b = &apos;hello&apos;</span><br><span class="line">console.log(obj); // &#123;a:1,b:2&#125; 修改失败</span><br></pre></td></tr></table></figure>
<p>检测是否冻结<strong>Object.isFrozen(obj)</strong></p>
<p>(false是正常，true是已经冻结了)</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Object.isFrozen(obj);// true</span><br></pre></td></tr></table></figure>
<h1 id="递归"><a href="#递归" class="headerlink" title="递归"></a>递归</h1><h2 id="arguments-callee：函数自身"><a href="#arguments-callee：函数自身" class="headerlink" title="arguments.callee：函数自身"></a>arguments.callee：函数自身</h2><p>用<code>arguments.callee</code>实现递归</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">function test(num) &#123;</span><br><span class="line">    console.log(num)</span><br><span class="line">    if(num!==0)&#123;</span><br><span class="line">        --num;</span><br><span class="line">        arguments.callee(num)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">test(3)</span><br><span class="line">3</span><br><span class="line">2</span><br><span class="line">1</span><br></pre></td></tr></table></figure>
<p>但是<code>arguments.callee</code>已经被弃用了，所以可以尝试其它方法。</p>
<h2 id="命名一个function"><a href="#命名一个function" class="headerlink" title="命名一个function"></a>命名一个function</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">function test(num) &#123;</span><br><span class="line">    (function fn ()&#123;</span><br><span class="line">        console.log(num)</span><br><span class="line">        if(num !== 0) &#123;</span><br><span class="line">            --num;</span><br><span class="line">            fn();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)();</span><br><span class="line">&#125;</span><br><span class="line">test(3)</span><br></pre></td></tr></table></figure>
<h1 id="return和闭包"><a href="#return和闭包" class="headerlink" title="return和闭包"></a>return和闭包</h1><h2 id="直接return"><a href="#直接return" class="headerlink" title="直接return"></a>直接return</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var a = 0;</span><br><span class="line">function fn()&#123;</span><br><span class="line">    var a = 12;</span><br><span class="line">    return a;</span><br><span class="line">&#125;</span><br><span class="line">console.log(fn()); // 12</span><br><span class="line">console.log(a); // 0</span><br></pre></td></tr></table></figure>
<h2 id="return-function"><a href="#return-function" class="headerlink" title="return function"></a>return function</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">var a = 0;</span><br><span class="line">function fn() &#123;</span><br><span class="line">    var a = 12;</span><br><span class="line">    return function()&#123;</span><br><span class="line">        return a</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br><span class="line">console.log(fn()()); // 12</span><br><span class="line">console.log(a); // 0</span><br></pre></td></tr></table></figure>
<h2 id="return-闭包"><a href="#return-闭包" class="headerlink" title="return 闭包"></a>return 闭包</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">var a = 0;</span><br><span class="line">function fn() &#123;</span><br><span class="line">    var a = 12;</span><br><span class="line">    return (function()&#123;</span><br><span class="line">        return a</span><br><span class="line">    &#125;)();</span><br><span class="line">&#125;</span><br><span class="line">console.log(fn()); // 12</span><br><span class="line">console.log(a); // 0</span><br></pre></td></tr></table></figure>
<h2 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h2><p>1.直接return返回的是变量，闭包返回的是执行环境（所以在return function部分就要fn()()这样调用2次）。<br>2.闭包不是为了让函数外部拿到内部变量，而是为了保护私有变量不被更改。<br>3.return出来的是一个值（12），不是变量本身（a），此处的return是取得私有变量值的一种方法，跟闭包没有严格关系。</p>
<h1 id="防抖和节流"><a href="#防抖和节流" class="headerlink" title="防抖和节流"></a>防抖和节流</h1><p><a href="http://demo.nimius.net/debounce_throttle/" target="_blank" rel="noopener">可视化在线demo</a><br><a href="https://wall-wxk.github.io/blogDemo/2017/02/15/throttleAndDebounce.html" target="_blank" rel="noopener">滚动栏在线demo</a></p>
<p><a href="https://www.jianshu.com/p/f9f6b637fd6c" target="_blank" rel="noopener">学习链接1</a><br><a href="https://www.jianshu.com/p/b73c2acad696" target="_blank" rel="noopener">学习链接2</a></p>
<h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><p>防抖：（停止后才1次）触发事件后n秒内只执行1次，如果n秒内又触发了事件，则会重新计算时间。<br>节流：（几秒1次）一定时间内只能执行1次。</p>
<h3 id="应用场景"><a href="#应用场景" class="headerlink" title="应用场景"></a>应用场景</h3><p>防抖：</p>
<ul>
<li>搜索框搜索输入，只有用户停止输入时，才发送请求；</li>
<li>手机号、邮箱号验证输入检测；</li>
<li>窗口resize，只需等窗口调整完成后计算大小，防止重复渲染。</li>
</ul>
<p>节流：</p>
<ul>
<li>表单验证时重复点击提交按钮；</li>
<li>滚动加载；</li>
<li>浏览器搜索框联想功能。</li>
</ul>
<h3 id="实现原理"><a href="#实现原理" class="headerlink" title="实现原理"></a>实现原理</h3><p>1、防抖</p>
<p>正常情况下，我希望它多久执行，假设邮箱验证正常情况是每隔1秒向后台发送请求，然后用户一直不停的在输入框输入，此时会不断的清除Timeout，直到停止调用方法1秒后才正常去向后台发送请求。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">// 防抖【防止多次触发滚动事件】</span><br><span class="line">var time = &apos;&apos;;</span><br><span class="line">handleDebounce () &#123;</span><br><span class="line">    console.log(&apos;调用&apos;)</span><br><span class="line">    // 清除未执行的代码，重置回初始化状态</span><br><span class="line">    if(timer)&#123;clearTimeout(timer);&#125; </span><br><span class="line">    //开始一个新的任务</span><br><span class="line">    timer = setTimeout(()=&gt;&#123;</span><br><span class="line">        console.log(&apos;函数防抖&apos;);</span><br><span class="line">    &#125;, 1000);</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<p><img src="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gho47acnm9j303q03ndfo.jpg" alt="image.png"></p>
<p>2、节流</p>
<p>假设浏览器一直在不停滚动，我不可能等停止了再请求，也不可能一直请求。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">var flag = false;</span><br><span class="line">handleThrottle () &#123;</span><br><span class="line">  console.log(&apos;调用&apos;)</span><br><span class="line">  if(flag)&#123;return&#125;</span><br><span class="line">  flag = false;</span><br><span class="line">  setTimeout(()=&gt;&#123;</span><br><span class="line">    console.log(&apos;函数节流&apos;);</span><br><span class="line">    flag = true;</span><br><span class="line">  &#125;,1000)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src="https://wx4.sinaimg.cn/mw690/0069qZtTgy1gho487f7lnj305904omx1.jpg" alt="image.png"></p>
<h1 id="let和闭包"><a href="#let和闭包" class="headerlink" title="let和闭包"></a>let和闭包</h1><h2 id="let劫持作用域"><a href="#let劫持作用域" class="headerlink" title="let劫持作用域"></a>let劫持作用域</h2><p><strong>用var时</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">console.log(str);</span><br><span class="line">var str = &apos;hello&apos;;</span><br></pre></td></tr></table></figure>
<p>打印出<code>undefined</code>。</p>
<p>相当于</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var str ;</span><br><span class="line">console.log(str);</span><br><span class="line">str = &apos;hello&apos;;</span><br></pre></td></tr></table></figure>
<p>用var 的话，变量名会提升，但并不会赋值。</p>
<p><strong>用let时</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">console.log(str);</span><br><span class="line">let str = &apos;hello&apos;;</span><br></pre></td></tr></table></figure>
<p>报错<code>VM67161:1 Uncaught ReferenceError: str is not defined</code></p>
<p>这里相当于直接<code>console.log(&#39;未定义变量名&#39;)</code>，此时的let已经劫持了var的作用域。</p>
<h2 id="用闭包作用域解释为什么用let的for循环可以劫持数据。"><a href="#用闭包作用域解释为什么用let的for循环可以劫持数据。" class="headerlink" title="用闭包作用域解释为什么用let的for循环可以劫持数据。"></a>用闭包作用域解释为什么用let的for循环可以劫持数据。</h2><p>假设我们想每隔1秒分别打印1、2、3、4、5。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">for (var i = 1; i &lt; 6; i++) &#123;</span><br><span class="line">    console.log(i)</span><br><span class="line">    setTimeout(() =&gt; &#123;</span><br><span class="line">        console.log(&apos;print&apos;+i)</span><br><span class="line">    &#125;, 1000 * i)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>会打印1、2、3、4、5，然后每隔1秒打印一次<code>&#39;print6&#39;</code>.</p>
<p>因为<code>任务流</code>的关系，console.log(i)会先于setTimeout执行，等for循环的6次console执行完之后，队列里的setTimeout才会依次执行，而这个时候的i已经是6了。</p>
<p>用let可以劫持i的作用域。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">for (var i = 1; i &lt; 6; i++) &#123;</span><br><span class="line">    let j = i;</span><br><span class="line">    console.log(j)</span><br><span class="line">    setTimeout(() =&gt; &#123;</span><br><span class="line">        console.log(&apos;print&apos;+j)</span><br><span class="line">    &#125;, 1000 * j)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>此时就是先打印1、2、3、4、5，然后每隔1秒打印’print1’、’print2’…’print5’。但是，每次都会有新的j替代原来的j，所以可以直接在for循环里面定义let i = 1;</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">for (let i = 1; i &lt; 6; i++) &#123;</span><br><span class="line">    console.log(i)</span><br><span class="line">    setTimeout(() =&gt; &#123;</span><br><span class="line">        console.log(&apos;print&apos;+i)</span><br><span class="line">    &#125;, 1000 * i)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="JavaScript相等操作符（-）"><a href="#JavaScript相等操作符（-）" class="headerlink" title="JavaScript相等操作符（==）"></a>JavaScript相等操作符（==）</h1><p>参考：<br><a href="https://www.cnblogs.com/wisewrong/p/10396002.html" target="_blank" rel="noopener">链接1</a><br><a href="https://blog.csdn.net/magic_xiang/article/details/83686224" target="_blank" rel="noopener">链接2</a><br><a href="https://yuchengkai.cn/docs/frontend/#%E6%93%8D%E4%BD%9C%E7%AC%A6" target="_blank" rel="noopener">链接3</a></p>
<h2 id="两组操作符"><a href="#两组操作符" class="headerlink" title="两组操作符"></a>两组操作符</h2><p>相等：<code>==</code>（先转换再比较）<br>全等：<code>===</code>（仅比较不转换）</p>
<h2 id="相等（-）规则"><a href="#相等（-）规则" class="headerlink" title="相等（==）规则"></a>相等（<code>==</code>）规则</h2><p><strong>Boolean规则：Boolean(val)</strong>：如果有一个操作数是<code>Boolean</code>值，则在比较前先将其转换为数值——<code>false</code>为<code>0</code>，<code>true</code>为<code>1</code>。<br><strong>String&amp;Number规则：Number(string)</strong>：如果一个是<code>String</code>，一个是<code>Number</code>，则先将<code>String</code>转为<code>Number</code>。<br><strong>Object规则：valueOf(obj)</strong>：如果有一个是对象，则调用<code>valueOf</code>方法（数组调<code>toString()</code>方法）。</p>
<p><img src="https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043719.png" alt></p>
<h2 id="问题探讨"><a href="#问题探讨" class="headerlink" title="问题探讨"></a>问题探讨</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">[] == []; // false</span><br><span class="line">&#123;&#125; == &#123;&#125;; // false</span><br><span class="line">[] == ![]; // true</span><br><span class="line">&#123;&#125; == !&#123;&#125;; // false</span><br></pre></td></tr></table></figure>
<p><code>[] == []</code>和<code>{} == {}</code>是因为引用的对象指向不同的指针，所以不会相等。</p>
<p><strong>一、<code>[] == ![]</code></strong></p>
<ul>
<li>1：逻辑非（<code>!</code>）的优先级高于相等操作符（<code>==</code>），所以先计算<code>![]</code>的<code>boolean</code>值<code>false</code>，此时比较的是：<code>[] == false</code>；</li>
<li>2：根据上面提到的<strong>boolean规则</strong>，则需要把 <code>false</code> 转成 <code>0</code>，此时比较的是：<code>[] == 0</code>；</li>
<li>3：根据上面提到的<strong>Object规则</strong>，调用空数组的toString方法，即<code>[].toString()</code>的值为<code>&#39;&#39;</code>，此时比较的是：<code>&#39;&#39; == 0</code>；</li>
<li>4：根据上面提到的<strong>String规则</strong>，将字符串转为数字，即<code>Number(&#39;&#39;)</code>的值为<code>0</code>，此时比较的是：<code>0 == 0</code>。</li>
</ul>
<p>简化：<br><code>[] == ![]</code> 转化：<code>[] == false</code> 转化： <code>[] == 0</code> 转化<code>&#39;&#39; == 0</code> 转化： <code>0 == 0</code>。</p>
<p><strong>二、<code>{} == !{}</code></strong></p>
<ul>
<li>1：先计算<code>!{}</code>得到<code>false</code>，此时比较的是：<code>{} == false</code>；</li>
<li>2：调用<strong>Booean规则</strong>，计算<code>Boolean({})</code>得到<code>true</code>，此时比较的是<code>true == false</code>。</li>
</ul>
<p>简化：<br><code>{} == !{}</code> 转化：<code>{} == false</code> 转化：<code>true == false</code>。</p>
<h1 id="Blob实现下载文件"><a href="#Blob实现下载文件" class="headerlink" title="Blob实现下载文件"></a>Blob实现下载文件</h1><p><a href="https://zhuanlan.zhihu.com/p/97768916" target="_blank" rel="noopener">参考链接</a></p>
<p>DOM:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;a id=&quot;download&quot; @click=&quot;download&quot;&gt;下载&lt;/a&gt;</span><br></pre></td></tr></table></figure>
<p>JS:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">download()&#123;</span><br><span class="line">    var blob = new Blob([&apos;hello world&apos;]);</span><br><span class="line">    var url = window.URL.createObjectURL(blob);</span><br><span class="line">    var a = document.getElementById(&apos;download&apos;);</span><br><span class="line">    a.download = &apos;helloworld.txt&apos;;</span><br><span class="line">    a.href = url;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h1 id="try-catch无法用于异步代码"><a href="#try-catch无法用于异步代码" class="headerlink" title="try...catch无法用于异步代码"></a><code>try...catch</code>无法用于异步代码</h1><h2 id="同步代码"><a href="#同步代码" class="headerlink" title="同步代码"></a>同步代码</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">try &#123;</span><br><span class="line">    foo();</span><br><span class="line">&#125; catch (error) &#123;</span><br><span class="line">    console.log(&apos;异常是：&apos;+error)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>此时会由catch捕捉到异常：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">异常是：ReferenceError: foo is not defined</span><br></pre></td></tr></table></figure>
<h2 id="异步代码"><a href="#异步代码" class="headerlink" title="异步代码"></a>异步代码</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">function foo()&#123;</span><br><span class="line">    setTimeout(()=&gt;&#123;</span><br><span class="line">        bar.arr();</span><br><span class="line">    &#125;,100);</span><br><span class="line">&#125;;</span><br><span class="line">try &#123;</span><br><span class="line">    foo();</span><br><span class="line">&#125; catch (error) &#123;</span><br><span class="line">    console.log(error)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>此时无法捕捉，而是浏览器控制台报出未捕捉异常。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Uncaught ReferenceError: bar is not defined</span><br></pre></td></tr></table></figure>
<h2 id="对比图"><a href="#对比图" class="headerlink" title="对比图"></a>对比图</h2><p><img src="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gho3yuu5lpj30au09n74t.jpg" alt="image"></p>
<h1 id="lighthouse前端性能优化工具"><a href="#lighthouse前端性能优化工具" class="headerlink" title="lighthouse前端性能优化工具"></a>lighthouse前端性能优化工具</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install -g lighthouse</span><br><span class="line"></span><br><span class="line">lighthouse https://www.cnblogs.com/</span><br></pre></td></tr></table></figure>
<p>生成html页面</p>
<h1 id="valueOf、toString和Symbol-toPrimitive"><a href="#valueOf、toString和Symbol-toPrimitive" class="headerlink" title="valueOf、toString和Symbol.toPrimitive"></a>valueOf、toString和Symbol.toPrimitive</h1><p>对象转基本类型时，先调用<code>valueOf</code>,再调用<code>toString</code>，如果有<code>Symbol.toPrimitive</code>的话优先级是最高的。</p>
<h2 id="valueOf-NaN"><a href="#valueOf-NaN" class="headerlink" title="valueOf"></a>valueOf</h2><p>如果有valueOf和toString时，valueOf的优先级高：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">let a = &#123;</span><br><span class="line">    valueOf() &#123;</span><br><span class="line">        return 1;</span><br><span class="line">    &#125;,</span><br><span class="line">    toString() &#123;</span><br><span class="line">        return &apos;2&apos;;</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br><span class="line">console.log( a + &apos;10&apos;); // 110</span><br></pre></td></tr></table></figure>
<h2 id="toString-NaN"><a href="#toString-NaN" class="headerlink" title="toString"></a>toString</h2><p>当只有toString时，才会调用它：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">let a = &#123;</span><br><span class="line">    toString() &#123;</span><br><span class="line">        return &apos;2&apos;;</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br><span class="line">console.log(a+203); // 2203</span><br></pre></td></tr></table></figure>
<h2 id="Symbol-toPrimitive"><a href="#Symbol-toPrimitive" class="headerlink" title="Symbol.toPrimitive"></a>Symbol.toPrimitive</h2><p>优先级最高，还可根据不同的类型转换成Number类型和String类型：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">let obj = &#123;</span><br><span class="line">    [Symbol.toPrimitive](hint) &#123;</span><br><span class="line">        switch (hint) &#123;</span><br><span class="line">        case &apos;number&apos;:</span><br><span class="line">            return 1234;</span><br><span class="line">            break;</span><br><span class="line">            </span><br><span class="line">        case &apos;string&apos;:</span><br><span class="line">            return &apos;str&apos;;</span><br><span class="line">            break;</span><br><span class="line">            </span><br><span class="line">        case &apos;default&apos;:</span><br><span class="line">            return &apos;default&apos;;</span><br><span class="line">            break;</span><br><span class="line">            </span><br><span class="line">        </span><br><span class="line">        default:</span><br><span class="line">            break;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">console.log(2 * obj); // 2468</span><br><span class="line">console.log(2 + obj); // 2default</span><br><span class="line">console.log(&apos;default&apos; === obj); // false</span><br><span class="line">console.log(String(obj)); /// str</span><br></pre></td></tr></table></figure>
<h1 id="window-postMessage"><a href="#window-postMessage" class="headerlink" title="window.postMessage"></a>window.postMessage</h1><p>知识点：</p>
<ul>
<li><code>addEventListener</code>监听的必须是<code>&#39;message&#39;</code></li>
<li><code>window.postMessage</code>发送的必须是自己的<code>域名</code></li>
</ul>
<p><a href="https://blog.csdn.net/weixin_40650646/article/details/81777398" target="_blank" rel="noopener">学习链接</a></p>
<p>需求：在页面a,里打开新窗口b，在b窗口里点击postMessage按钮，能够在a页面收到发来的消息</p>
<p>页面A：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;button onClick=&quot;test()&quot;&gt;open&lt;/button&gt;</span><br><span class="line"></span><br><span class="line">...</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    function test() &#123;</span><br><span class="line">    </span><br><span class="line">        let op = window.open(&apos;b.html&apos;, &apos;_blank&apos;); //打开新窗口，并建立窗口的引用变量op</span><br><span class="line">    </span><br><span class="line">        function receiveMessage(event) &#123;</span><br><span class="line">            console.log(&apos;event&apos;, event);</span><br><span class="line">        &#125;</span><br><span class="line">    </span><br><span class="line">        op.addEventListener(&quot;message&quot;, receiveMessage, false); //监听新开窗口发来的消息</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>页面B：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">window.postMessage(&quot;hi there!&quot;, location.origin);</span><br></pre></td></tr></table></figure>
<p>此时点击页面B的发送消息按钮就能在页面A接收消息了。</p>
<h1 id="JSON的更多参数用法"><a href="#JSON的更多参数用法" class="headerlink" title="JSON的更多参数用法"></a>JSON的更多参数用法</h1><h2 id="JSON-stringify"><a href="#JSON-stringify" class="headerlink" title="JSON.stringify"></a>JSON.stringify</h2><p>新建一个普通对象</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var settings = &#123;</span><br><span class="line">  username: &apos;lydiahallie&apos;,</span><br><span class="line">  level: 19,</span><br><span class="line">  health: 90,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h3 id="普通用法"><a href="#普通用法" class="headerlink" title="普通用法"></a>普通用法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var data = JSON.stringify(settings); // &quot;&#123;&quot;username&quot;:&quot;lydiahallie&quot;,&quot;level&quot;:19,&quot;health&quot;:90&#125;&quot;</span><br></pre></td></tr></table></figure>
<h3 id="参数2：参数过滤"><a href="#参数2：参数过滤" class="headerlink" title="参数2：参数过滤"></a>参数2：参数过滤</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var data = JSON.stringify(settings, [&apos;level&apos;, &apos;health&apos;]); // &quot;&#123;&quot;level&quot;:19,&quot;health&quot;:90&#125;&quot;</span><br></pre></td></tr></table></figure>
<h3 id="参数3：参数排版"><a href="#参数3：参数排版" class="headerlink" title="参数3：参数排版"></a>参数3：参数排版</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var data = JSON.stringify(settings, undefined, 2);</span><br></pre></td></tr></table></figure>
<p>打印出来：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&quot;&#123;</span><br><span class="line">  &quot;username&quot;: &quot;lydiahallie&quot;,</span><br><span class="line">  &quot;level&quot;: 19,</span><br><span class="line">  &quot;health&quot;: 90</span><br><span class="line">&#125;&quot;</span><br></pre></td></tr></table></figure>
<p>不再是一行，而是有了排版的字符串。</p>
<h2 id="JSON-parse"><a href="#JSON-parse" class="headerlink" title="JSON.parse"></a>JSON.parse</h2><h2 id="参数1：普通用法"><a href="#参数1：普通用法" class="headerlink" title="参数1：普通用法"></a>参数1：普通用法</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">SON.parse(&apos;&#123;&quot;p&quot;: 5&#125;&apos;); // &#123;p: 5&#125;</span><br></pre></td></tr></table></figure>
<h2 id="参数2：过滤函数"><a href="#参数2：过滤函数" class="headerlink" title="参数2：过滤函数"></a>参数2：过滤函数</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">JSON.parse(&apos;&#123;&quot;p&quot;: 5&#125;&apos;,((key,value)=&gt;&#123;</span><br><span class="line">    console.log(key,value);</span><br><span class="line">    return value*20;</span><br><span class="line">&#125;))</span><br></pre></td></tr></table></figure>
<p>返回：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">p 5</span><br><span class="line">&#123;p: 100&#125;</span><br></pre></td></tr></table></figure>
<h1 id="与JAVA相通的概念"><a href="#与JAVA相通的概念" class="headerlink" title="与JAVA相通的概念"></a>与JAVA相通的概念</h1><h2 id="MVC、MVVM"><a href="#MVC、MVVM" class="headerlink" title="MVC、MVVM"></a>MVC、MVVM</h2><h3 id="MVC"><a href="#MVC" class="headerlink" title="MVC"></a>MVC</h3><p>Model层:模型层，比如图片放一个类，标题放一个类<br>View层：显示页面，如xml<br>Controller层：控制Model的读取、存储。如MainActivity</p>
<h2 id="MVVM"><a href="#MVVM" class="headerlink" title="MVVM"></a>MVVM</h2><p>MVVM实现了View和Model的自动同步，当Model的属性改变时，我们不再手动操作DOM，也就是双向绑定。</p>
<p>Model层：后端传递的数据<br>View层：页面<br>ViewModel层：视图模型，连接Model和View的桥梁。将Model转为View（将后端数据显示给前端）用的是数据绑定，将View转为Model（将前端数据转给后端）用的DOM监听，这种实现方法称为为<strong>数据的双向绑定</strong>。</p>
<h2 id="类"><a href="#类" class="headerlink" title="类"></a>类</h2><p>js里面的类和其它OOP里面的类概念是一样的。（比如，所有的车是一个类，房子是一个类）</p>
<h2 id="jsBridge"><a href="#jsBridge" class="headerlink" title="jsBridge"></a>jsBridge</h2><p>js与android的通信</p>
<h3 id="android代码："><a href="#android代码：" class="headerlink" title="android代码："></a>android代码：</h3><p>java发消息给js：<br><code>webview.send()</code><br>java收js的消息<br><code>webview.registerHander(&#39;name&#39;,new Bridge(){})</code></p>
<h3 id="javaScript代码："><a href="#javaScript代码：" class="headerlink" title="javaScript代码："></a>javaScript代码：</h3><p>js发消息给java<br><code>window.WebViewJavaScriptBridge.send()</code><br>js收java的消息<br><code>document.addEventListener(&#39;WebViewJavaScriptBridgeReady&#39;,()=&gt;{})</code></p>
<h1 id="hybird"><a href="#hybird" class="headerlink" title="hybird"></a>hybird</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;.company_color&quot;).click(function()&#123;</span><br><span class="line">  var u = navigator.userAgent;</span><br><span class="line">  var isAndroid = u.indexOf(&apos;Android&apos;) &gt; -1 || u.indexOf(&apos;Linux&apos;) &gt; -1; //android终端或者uc浏览器</span><br><span class="line">  var isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端</span><br><span class="line">  var company_name = $(this).text();</span><br><span class="line">  if(isAndroid) &#123;</span><br><span class="line">    var msg = window.mrlou.androidIs(&quot;2&quot;,company_name);</span><br><span class="line">  &#125; else if(isIos) &#123;</span><br><span class="line">    //iosPhone()这个方法，ios会自动监听，并接收我传过来的值，用msg接收它传给我的值</span><br><span class="line">    broker(&quot;2&quot;,company_name);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h1 id="HTTP"><a href="#HTTP" class="headerlink" title="HTTP"></a>HTTP</h1><h2 id="协议"><a href="#协议" class="headerlink" title="协议"></a>协议</h2><p>客户端和服务器之间传输数据的规范，全称是“超文本传输协议”。</p>
<h2 id="协议请求"><a href="#协议请求" class="headerlink" title="协议请求"></a>协议请求</h2><p>GET、POST和OPTION</p>
<h2 id="GET和POST的区别"><a href="#GET和POST的区别" class="headerlink" title="GET和POST的区别"></a>GET和POST的区别</h2><ul>
<li>GET产生1个TCP数据包，POST产生2个TCP数据包（GET请求会把header和data一并发出去，POST会先发header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok）</li>
<li>GET参数直接显示在地址栏，不能传输敏感信息</li>
<li>GET请求的地址可以收藏</li>
<li>GET请求会被主动缓存</li>
<li>GET请求参数会被保留在浏览记录中</li>
<li>GET请求参数有长度限制（不同浏览器不同限制）</li>
<li>GET只能URL传参</li>
</ul>
<h2 id="HTTP和HTTPS的区别"><a href="#HTTP和HTTPS的区别" class="headerlink" title="HTTP和HTTPS的区别"></a>HTTP和HTTPS的区别</h2><ul>
<li><p>HTTPS=HTTP+SSL证书</p>
</li>
<li><p>HTTP是超文本传输协议，信息是明文传输；HTTPS则是具有安全性的SSL加密协议传输</p>
</li>
</ul>
<h2 id="跨域"><a href="#跨域" class="headerlink" title="跨域"></a>跨域</h2><p><a href="https://segmentfault.com/a/1190000011145364" target="_blank" rel="noopener">更全跨域方法链接</a></p>
<ul>
<li>jsonp跨域</li>
<li>跨域资源共享（CORS）</li>
<li>nodejs中间件代理跨域</li>
<li>iframe</li>
</ul>
<h2 id="jsonp"><a href="#jsonp" class="headerlink" title="jsonp"></a>jsonp</h2><p>把JS、CSS、IMG等静态资源分离到独立域名的服务器上。<br><strong>缺点：只能实现GET请求</strong>。</p>
<h3 id="原生实现"><a href="#原生实现" class="headerlink" title="原生实现"></a>原生实现</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">  var script = document.createElement(&apos;script&apos;);</span><br><span class="line">  script.type = &apos;text/javascript&apos;;</span><br><span class="line"></span><br><span class="line">  // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数</span><br><span class="line">  script.src = &apos;http://www.domain2.com:8080/login?user=admin&amp;callback=handleCallback&apos;;</span><br><span class="line">  document.head.appendChild(script);</span><br><span class="line"></span><br><span class="line">  // 回调执行函数</span><br><span class="line">  function handleCallback(res) &#123;</span><br><span class="line">      alert(JSON.stringify(res));</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="jquery-ajax"><a href="#jquery-ajax" class="headerlink" title="jquery ajax"></a>jquery ajax</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">$.ajax(&#123;</span><br><span class="line">    url: &apos;http://www.domain2.com:8080/login&apos;,</span><br><span class="line">    type: &apos;get&apos;,</span><br><span class="line">    dataType: &apos;jsonp&apos;,  // 请求方式为jsonp</span><br><span class="line">    jsonpCallback: &quot;handleCallback&quot;,    // 自定义回调函数名</span><br><span class="line">    data: &#123;&#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="vue-js："><a href="#vue-js：" class="headerlink" title="vue.js："></a>vue.js：</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">this.$http.jsonp(&apos;http://www.domain2.com:8080/login&apos;, &#123;</span><br><span class="line">    params: &#123;&#125;,</span><br><span class="line">    jsonp: &apos;handleCallback&apos;</span><br><span class="line">&#125;).then((res) =&gt; &#123;</span><br><span class="line">    console.log(res); </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="CORS"><a href="#CORS" class="headerlink" title="CORS"></a>CORS</h2><p>普通跨域请求，只需要服务端设置<code>Access-Control-Allow-Origin</code>即可；若要携带<code>cookie</code>请求，前后端都要设置。</p>
<h3 id="原生ajax"><a href="#原生ajax" class="headerlink" title="原生ajax"></a>原生ajax</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">// 前端设置是否带cookie</span><br><span class="line">xhr.withCredentials = true;</span><br></pre></td></tr></table></figure>
<h3 id="jQuery-ajax"><a href="#jQuery-ajax" class="headerlink" title="jQuery ajax"></a>jQuery ajax</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">$.ajax(&#123;</span><br><span class="line">    ...</span><br><span class="line">   xhrFields: &#123;</span><br><span class="line">       withCredentials: true    // 前端设置是否带cookie</span><br><span class="line">   &#125;,</span><br><span class="line">   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie</span><br><span class="line">    ...</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="vue框架-axios设置"><a href="#vue框架-axios设置" class="headerlink" title="vue框架 axios设置"></a>vue框架 axios设置</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">axios.defaults.withCredentials = true</span><br></pre></td></tr></table></figure>
<h3 id="Nodejs中间件代理跨域"><a href="#Nodejs中间件代理跨域" class="headerlink" title="Nodejs中间件代理跨域"></a>Nodejs中间件代理跨域</h3><p>如<code>proxy</code>中间件</p>
<h2 id="缓存"><a href="#缓存" class="headerlink" title="缓存"></a>缓存</h2><p>一般是在<code>html</code>中的<code>meta</code>标签上定义属性</p>
<p>方法一：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;meta http-equiv=&quot;Pragma&quot; content=&quot;no-cache&quot;&gt;</span><br></pre></td></tr></table></figure>
<p>方法二：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;meta http-equiv=&quot;expires&quot; content=&quot;mon, 18 apr 2016 14:30:00 GMT&quot;&gt;</span><br></pre></td></tr></table></figure>
<p>请求–判断max-age是否过期（没过期就直接在缓存数据库中得到数据）–过期后判断属性是否字段一致，再使用缓存。</p>
<h1 id="session和cookie"><a href="#session和cookie" class="headerlink" title="session和cookie"></a>session和cookie</h1><p>cookie是在客户端，session是在服务端。<br>一般如果想跳过cookie的限制，就用session。</p>
<h1 id="HTML渲染过程"><a href="#HTML渲染过程" class="headerlink" title="HTML渲染过程"></a>HTML渲染过程</h1><p>1、解析HTML，构成DOM<br>2、解析CSS，形成CSS对象模型<br>3、将CSS和DOM合并，构成渲染模型<br>4、绘制</p>
<p>重绘：corlor、borde、visibility，只会小变动；<br>重排（回流）：DOM操作、CSS属性改变、伪类操作，会大变动。</p>
<h1 id="前端路由和后端路由"><a href="#前端路由和后端路由" class="headerlink" title="前端路由和后端路由"></a>前端路由和后端路由</h1><p>前端路由（#）：hash值或pushStatu<br>后端路由（/）：通过URL跳转到具体的html页面，每次跳转都重新访问服务端，服务端返回页面。</p>
<h1 id="localStorage标签页通信"><a href="#localStorage标签页通信" class="headerlink" title="localStorage标签页通信"></a>localStorage标签页通信</h1><p>page1</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">localStorage.setItem(&apos;send&apos;,&apos;sendValue&apos;);</span><br></pre></td></tr></table></figure>
<p>page2</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">window.addEventListener(&apos;storage&apos;, (e) =&gt; &#123;</span><br><span class="line">    console.log(e)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2020/11/29/学车笔记/" rel="next" title="学车笔记">
                <i class="fa fa-chevron-left"></i> 学车笔记
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2020/12/07/CSS之进阶总结/" rel="prev" title="CSS之进阶总结">
                CSS之进阶总结 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
      <div id="lv-container" data-id="city" data-uid="MTAyMC8zODk2OC8xNTQ5Ng=="></div>
    </div>

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="https://upload.jianshu.io/users/upload_avatars/830956/debe5156eed7?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt="彭丹丹">
            
              <p class="site-author-name" itemprop="name">彭丹丹</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives">
              
                  <span class="site-state-item-count">183</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">3</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#基本概念"><span class="nav-number">1.</span> <span class="nav-text">基本概念</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#lt-noscript-gt"><span class="nav-number">1.1.</span> <span class="nav-text">&lt;noscript&gt;</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#lt-script-gt-中的async和defer"><span class="nav-number">1.2.</span> <span class="nav-text">&lt;script&gt;中的async和defer</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#typeof-null为什么返回object"><span class="nav-number">1.3.</span> <span class="nav-text">typeof null为什么返回object</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#防篡改对象"><span class="nav-number">2.</span> <span class="nav-text">防篡改对象</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#不可扩展对象preventExtensions"><span class="nav-number">2.1.</span> <span class="nav-text">不可扩展对象preventExtensions</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#密封的对象seal"><span class="nav-number">2.2.</span> <span class="nav-text">密封的对象seal</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#冻结的对象freeze"><span class="nav-number">2.3.</span> <span class="nav-text">冻结的对象freeze</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#递归"><span class="nav-number">3.</span> <span class="nav-text">递归</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#arguments-callee：函数自身"><span class="nav-number">3.1.</span> <span class="nav-text">arguments.callee：函数自身</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#命名一个function"><span class="nav-number">3.2.</span> <span class="nav-text">命名一个function</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#return和闭包"><span class="nav-number">4.</span> <span class="nav-text">return和闭包</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#直接return"><span class="nav-number">4.1.</span> <span class="nav-text">直接return</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#return-function"><span class="nav-number">4.2.</span> <span class="nav-text">return function</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#return-闭包"><span class="nav-number">4.3.</span> <span class="nav-text">return 闭包</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#区别"><span class="nav-number">4.4.</span> <span class="nav-text">区别</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#防抖和节流"><span class="nav-number">5.</span> <span class="nav-text">防抖和节流</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#概念"><span class="nav-number">5.0.1.</span> <span class="nav-text">概念</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#应用场景"><span class="nav-number">5.0.2.</span> <span class="nav-text">应用场景</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#实现原理"><span class="nav-number">5.0.3.</span> <span class="nav-text">实现原理</span></a></li></ol></li></ol><li class="nav-item nav-level-1"><a class="nav-link" href="#let和闭包"><span class="nav-number">6.</span> <span class="nav-text">let和闭包</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#let劫持作用域"><span class="nav-number">6.1.</span> <span class="nav-text">let劫持作用域</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#用闭包作用域解释为什么用let的for循环可以劫持数据。"><span class="nav-number">6.2.</span> <span class="nav-text">用闭包作用域解释为什么用let的for循环可以劫持数据。</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#JavaScript相等操作符（-）"><span class="nav-number">7.</span> <span class="nav-text">JavaScript相等操作符（==）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#两组操作符"><span class="nav-number">7.1.</span> <span class="nav-text">两组操作符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#相等（-）规则"><span class="nav-number">7.2.</span> <span class="nav-text">相等（==）规则</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#问题探讨"><span class="nav-number">7.3.</span> <span class="nav-text">问题探讨</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Blob实现下载文件"><span class="nav-number">8.</span> <span class="nav-text">Blob实现下载文件</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#try-catch无法用于异步代码"><span class="nav-number">9.</span> <span class="nav-text">try...catch无法用于异步代码</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#同步代码"><span class="nav-number">9.1.</span> <span class="nav-text">同步代码</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#异步代码"><span class="nav-number">9.2.</span> <span class="nav-text">异步代码</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#对比图"><span class="nav-number">9.3.</span> <span class="nav-text">对比图</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#lighthouse前端性能优化工具"><span class="nav-number">10.</span> <span class="nav-text">lighthouse前端性能优化工具</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#valueOf、toString和Symbol-toPrimitive"><span class="nav-number">11.</span> <span class="nav-text">valueOf、toString和Symbol.toPrimitive</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#valueOf-NaN"><span class="nav-number">11.1.</span> <span class="nav-text">valueOf</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#toString-NaN"><span class="nav-number">11.2.</span> <span class="nav-text">toString</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Symbol-toPrimitive"><span class="nav-number">11.3.</span> <span class="nav-text">Symbol.toPrimitive</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#window-postMessage"><span class="nav-number">12.</span> <span class="nav-text">window.postMessage</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#JSON的更多参数用法"><span class="nav-number">13.</span> <span class="nav-text">JSON的更多参数用法</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#JSON-stringify"><span class="nav-number">13.1.</span> <span class="nav-text">JSON.stringify</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#普通用法"><span class="nav-number">13.1.1.</span> <span class="nav-text">普通用法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#参数2：参数过滤"><span class="nav-number">13.1.2.</span> <span class="nav-text">参数2：参数过滤</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#参数3：参数排版"><span class="nav-number">13.1.3.</span> <span class="nav-text">参数3：参数排版</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JSON-parse"><span class="nav-number">13.2.</span> <span class="nav-text">JSON.parse</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#参数1：普通用法"><span class="nav-number">13.3.</span> <span class="nav-text">参数1：普通用法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#参数2：过滤函数"><span class="nav-number">13.4.</span> <span class="nav-text">参数2：过滤函数</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#与JAVA相通的概念"><span class="nav-number">14.</span> <span class="nav-text">与JAVA相通的概念</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#MVC、MVVM"><span class="nav-number">14.1.</span> <span class="nav-text">MVC、MVVM</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#MVC"><span class="nav-number">14.1.1.</span> <span class="nav-text">MVC</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#MVVM"><span class="nav-number">14.2.</span> <span class="nav-text">MVVM</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#类"><span class="nav-number">14.3.</span> <span class="nav-text">类</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jsBridge"><span class="nav-number">14.4.</span> <span class="nav-text">jsBridge</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#android代码："><span class="nav-number">14.4.1.</span> <span class="nav-text">android代码：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#javaScript代码："><span class="nav-number">14.4.2.</span> <span class="nav-text">javaScript代码：</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#hybird"><span class="nav-number">15.</span> <span class="nav-text">hybird</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP"><span class="nav-number">16.</span> <span class="nav-text">HTTP</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#协议"><span class="nav-number">16.1.</span> <span class="nav-text">协议</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#协议请求"><span class="nav-number">16.2.</span> <span class="nav-text">协议请求</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#GET和POST的区别"><span class="nav-number">16.3.</span> <span class="nav-text">GET和POST的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTTP和HTTPS的区别"><span class="nav-number">16.4.</span> <span class="nav-text">HTTP和HTTPS的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#跨域"><span class="nav-number">16.5.</span> <span class="nav-text">跨域</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jsonp"><span class="nav-number">16.6.</span> <span class="nav-text">jsonp</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#原生实现"><span class="nav-number">16.6.1.</span> <span class="nav-text">原生实现</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#jquery-ajax"><span class="nav-number">16.6.2.</span> <span class="nav-text">jquery ajax</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue-js："><span class="nav-number">16.6.3.</span> <span class="nav-text">vue.js：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CORS"><span class="nav-number">16.7.</span> <span class="nav-text">CORS</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#原生ajax"><span class="nav-number">16.7.1.</span> <span class="nav-text">原生ajax</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#jQuery-ajax"><span class="nav-number">16.7.2.</span> <span class="nav-text">jQuery ajax</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue框架-axios设置"><span class="nav-number">16.7.3.</span> <span class="nav-text">vue框架 axios设置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Nodejs中间件代理跨域"><span class="nav-number">16.7.4.</span> <span class="nav-text">Nodejs中间件代理跨域</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#缓存"><span class="nav-number">16.8.</span> <span class="nav-text">缓存</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#session和cookie"><span class="nav-number">17.</span> <span class="nav-text">session和cookie</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTML渲染过程"><span class="nav-number">18.</span> <span class="nav-text">HTML渲染过程</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#前端路由和后端路由"><span class="nav-number">19.</span> <span class="nav-text">前端路由和后端路由</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#localStorage标签页通信"><span class="nav-number">20.</span> <span class="nav-text">localStorage标签页通信</span></a></li></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">彭丹丹</span>

  
</div>


	<div class="powered-by">
	<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
	  本站访客数:<span id="busuanzi_value_site_uv"></span>
	</span>
	</div>
  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  












  





  

  

  

  
  

  

  

  

  undefined
  
  <!-- 页面爆炸效果 -->
  
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/tororo.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true}});</script></body>
</html>
